<template>
	<el-header>
		<el-tabs v-model="table.status" type="card" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="全部" name="" />
			<el-tab-pane :label="`铺货成功 ${table.count.success}`" name="success" />
			<el-tab-pane :label="`货源失效 ${table.count.loss}`" name="loss" />
			<el-tab-pane :label="`铺货失败 ${table.count.error}`" name="fail" />
		</el-tabs>
	</el-header>
	<el-main style="padding: 0 20px">
		<div class="sa-table-wrap" v-loading="loading">
			<el-table height="100%" class="sa-table" :data="table.data"  row-key="id" stripe>
				<template #empty>
					<sa-empty></sa-empty>
				</template>
				<el-table-column  prop="id" label="ID" min-width="50"></el-table-column>
				<el-table-column label="商品" min-width="240" align="center">
					<template #default="scope">
						<div class="sa-flex">
							<sa-preview :url="scope.row.image" size="70"></sa-preview>
							<div class="goodsInfo sa-m-l-10">
								<div class="goodsInfo-title sa-line-2">
									<span class="gys">供应商</span>
									{{ scope.row.title }}
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="价格" min-width="100" align="center">
					<template #default="scope">
						<div class="sa-flex sa-row-center price">
							<div>{{ scope.row.price || 0 }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="stock" label="库存" min-width="100" align="center">
					<template #default="scope">
						<div>{{ scope.row.stock || 0 }}</div>
					</template>
				</el-table-column>
				<el-table-column label="状态" min-width="100" align="center">
					<template #default="scope">
						<el-tag :type="status[scope.row.status][1]">{{ status[scope.row.status][0] }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="更新时间" width="120">
					<template #default="scope">{{ scope.row.create_time || '-' }}</template>
				</el-table-column>
				<el-table-column label="操作" min-width="140" fixed="right"  align="center">
					<template #default="scope">
						<div class="sa-flex-col">
							<el-button class="is-link sa-m-l-12"  v-if="scope.row.status == 'success'" type="primary" @click="toDetails(scope.row)">查看货源</el-button>
							<el-button class="is-link sa-m-l-12" v-if="scope.row.status == 'success'" type="primary" @click="noBindGoods(scope.row)">解除货源关联</el-button>
							<!-- <el-popconfirm width="fit-content" confirm-button-text="确认" cancel-button-text="取消"
								title="确认删除这条记录?" @confirm="deleteRow(scope.row)">
								<template #reference>
									<el-button  class="is-link"
										type="danger">
										删除
									</el-button>
								</template>
							</el-popconfirm> -->
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-main>
	<el-footer class="goods-index-footer">
		<sa-view-bar>
			<template #right>
				<sa-pagination :pageData="pageData" @updateFn="getData" />
			</template>
		</sa-view-bar>
	</el-footer>
</template>
<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
import { cloneDeep } from 'lodash';
import $store from '@/sheep/store';
import { ElMessageBox, ElMessage } from 'element-plus';

import { api } from '../recommend.service';
import { useModal, usePagination } from '@/sheep/hooks';
import details from '../details.vue';

const { pageData } = usePagination();
const loading = ref(true);

// 表格
const table = reactive({
	status: '',
	data: [],
	order: 'desc',
	sort: 'id',
	selected: [],
	count: {
		success: 0,
		loss: 0,
		error: 0,
	}
});
const status = {
	success: ['铺货成功', 'success'],
	error: ['铺货失败', 'error'],
	loss: ['货源失效', 'info'],
}
const handleClick = () => {
	getData()
}
// table 字段排序
function fieldFilter({ prop, order }) {
	table.order = order == 'ascending' ? 'asc' : 'desc';
	table.sort = prop;
	getData();
}
function deleteRow(row){

}
async function noBindGoods(row){
	const { store_id } =$store('account').info;
	let res = await api.noBindGoods({
		store_id:store_id,
		goods_id:row.goods_id
	});
	if (res.error === 0) {
		ElMessage({
			type: 'success',
			message: res.msg,
		});
		getData();
	}
}
function toDetails(item){
useModal(
	details,
	{
		title: '货源推荐',
		id: item?.father_goods_id,
	},
	{
		confirm: () => {
			getData();
		},
		close: () => {
			getData();
		},
	},
	true
);
}

// 获取数据
async function getData(page) {
	const { store_id } =$store('account').info;
	if(!store_id && store_id != 0){
		ElMessage({
			type: 'warning',
			message: '账号下没有绑定店铺',
		});
		loading.value = false;

		return;
	}
	console.log($store('account'));
	loading.value = true;
	if (page) pageData.page = page;
	const { error, data } = await api.clickStockingRecord(store_id, {
		record_type:table.status,
		page: pageData.page,
		list_rows: pageData.list_rows,
		order: table.order,
		sort: table.sort,
	});
	if (error === 0) {
		table.count = data.count;
		table.data = data.list.data;
		pageData.page = data.list.current_page;
		pageData.list_rows = data.list.per_page;
		pageData.total = data.list.total;
	}
	loading.value = false;
}
onMounted(() => {
	getData();
})
</script>
<style lang="scss" scoped>
.goodsInfo {
	height: 70px;
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	.goodsInfo-title{
		text-align: left;
		.gys{
			border-radius: 4px;
			background: linear-gradient(270deg, #070707 0%, rgba(7, 7, 7, 0) 174%);
			font-family: Source Han Sans;
			padding: 0 4px;
font-size: 12px;
font-weight: bold;
line-height: normal;
letter-spacing: normal;
color: #C8BDAD;
		}
	}
}
</style>